<template>
  <div class="navigation">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
    >
      <el-row>
        <el-col :span="6">
          <router-link to="/">FY</router-link>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="/">首页</el-menu-item>
        </el-col>

        <el-col :span="2">
          <el-menu-item index="/calculate">线性计算</el-menu-item>
        </el-col>
        <el-col :span="2">
          <el-menu-item index="/subjectList">题库</el-menu-item></el-col
        >
        <el-col :span="2">
          <el-menu-item index="/discussList">讨论</el-menu-item></el-col
        > 
        <!-- <el-col :span="2" class="projects">登录/用户名</el-col> -->
        <el-col :span="10" v-if="this.$store.getters.getUser">
          <el-menu-item
            ><el-button type="text" @click="handleLoginBtn" class="tinct"
              >登录</el-button
            ></el-menu-item
          >
        </el-col>
        <el-col :span="10" v-if="!this.$store.getters.getUser">
          <el-menu-item>
            <el-button type="text" @click="handleUserInfoBtn(1)" class="tinct"
              ><img
                src="https://yaling.oss-cn-shenzhen.aliyuncs.com/20211121/4.jpg
"
            /></el-button>
          </el-menu-item>
        </el-col>
      </el-row>
    </el-menu>
  </div>
</template>

<script>
import "@/assets/css/narbar.css";
export default {
  name: "navbar",
  data() {
    return {
      avatar: "",
      activeIndex: "/",
    };
  },
  methods: {
    handleLoginBtn() {
      //指定跳转地址
      this.$router.replace("/login");
    },
    handleUserInfoBtn(userId) {
      this.$router.replace({ path: "/myInfo", query: { userId: userId } });
    },
  },
  created: {},
};
</script>

<style></style>
